<template>
  <div class="manage-container">
    <header>
      <div class="title" style="width: 300px">Java项目实战网管理后台</div>
      <div class="menu-wrap">
        <el-menu
          style="display:inline-block;border-bottom:0;"
          mode="horizontal"
          active-text-color="#00965e"
          :default-active="activeMenu"
          @select="handleMenuSelect">
          <el-menu-item v-for="menu in menus" :index="menu.id" :key="menu.id">
            <span slot="title">{{menu.name}}</span>
          </el-menu-item> 
        </el-menu>
      </div>
      <el-dropdown class="tool-bar" @command="handleCommand">
        <span class="el-dropdown-link">
          欢迎你！{{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </header>
    <div class="main-content">     
      <div class="setting-wrap"><component :is="settingComp" /></div>
    </div>
  </div>
</template>

<script>
// import Form from './form';
// import Table from './table';
import { setDefaultToken } from '../api/index';

export default {
  name: 'Main',
  components: {
    'ad-setting': () => import('./ad-setting.vue'),
    'bs-setting': () => import('./bs-setting.vue'),
    'ky-setting': () => import('./ky-setting.vue'),
    'bc-setting': () => import('./bc-setting.vue'),
    'ms-setting': () => import('./ms-setting.vue'),
    'lb-setting': () => import('./lb-setting.vue')
  },
  data() {
    return {
      userName: '',
      menus: [
        { id: '1', name: '广告位管理' },
        { id: '2', name: '中小型项目' },
        { id: '3', name: '开源项目' },
        { id: '4', name: '编程知识' },
        { id: '5', name: '面试充电' },
        { id: '6', name: '标签管理' }
      ],      
      activeMenu: '1',
      phone: '',
      picList: [],
      form: {
        id: null,
        title: '',
        faceImg: '',
        contents: [],
      }
    };
  },
  computed: {
    // 当前模块是否需要配置多条
    settingComp() {
      const compMap = {
        '1': 'ad-setting',
        '2': 'bs-setting',
        '3': 'ky-setting',
        '4': 'bc-setting',
        '5': 'ms-setting',
        '6': 'lb-setting'
      };
      return compMap[this.activeMenu];
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'loginOut') {
        sessionStorage.removeItem('userName');
        sessionStorage.removeItem('token');
        this.$router.push('/login');
      }
    },
    handleMenuSelect(id) {
      this.activeMenu = id;
    }
  },
  mounted() {
    const token = sessionStorage.getItem('token');
    this.userName = sessionStorage.getItem('userName');
    if (token) {
      setDefaultToken(token);
    } else {
      window.location.href = window.location.origin + '/login';
    }
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
.manage-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  header {
    display: flex;
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    padding: 0 24px;
    font-size: 16px;
    color: #00965e;
    font-weight: bold;
    border-bottom: 1px solid #e6e6e6;
    .menu-wrap {
      flex: 1;
      height: 100%;
      text-align: left;
    }
    .tool-bar {
      font-size: 14px;
      font-weight: normal;
      cursor: pointer;
    }
  }

  .main-content {
    display: flex;
    flex: 1;
    width: 100%;
    overflow: hidden;

    .setting-wrap {
      flex: 1;
      height: 100%;      
      padding: 16px;
      box-sizing: border-box;
      overflow-y: auto;
      background-color: #f7f7f7;
    }
  } 
}
</style>
